/* CSS Document */
.ui-page {
	position:absolute;
	left:0;
	top:0;
	background-color:#fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden
}

.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

}
.show{
	display:block;
}

.hide{
	display:none;
}

.myslide.out {

         -webkit-transform: translateX(-100%);/* Chrome and Safari*/
			-moz-transform: translateX(-100%);/* Mozilla Firefox */
         -webkit-animation-name: slideouttoleft;
 			-moz-animation-name: slideouttoleft;
}

.myslide.in {

         -webkit-transform: translateX(0);
		 	-moz-transform: translateX(0);
         -webkit-animation-name: slideinfromright;
            -moz-animation-name: slideinfromright;
}

/**
 * 	从底部进入
 */
.myslide.in.moveFromBottom {
	-webkit-animation: moveFromBottom 0.8s ease both;
	-moz-animation: moveFromBottom 0.8s ease both;
	animation: moveFromBottom 0.8s ease both;
}

/**
 * 	从底部退出
 */
.myslide.out.moveToBottom {
	-webkit-animation: moveToBottom 0.8s ease both;
	-moz-animation: moveToBottom 0.8s ease both;
	animation: moveToBottom 0.8s ease both;
}

.myslide.out.reverse {

         -webkit-transform: translateX(100%);
 		   -moz-transform: translateX(100%);
         -webkit-animation-name: slideouttoright;
 		   -moz-animation-name: slideouttoright;
}

.myslide.in.reverse {

         -webkit-transform: translateX(0);
 		    -moz-transform: translateX(0);
         -webkit-animation-name: slideinfromleft;
		    -moz-animation-name: slideinfromleft;

}
.in, .out {

         -webkit-animation-timing-function: ease-in-out;
			-moz-animation-timing-function: ease-in-out;
         -webkit-animation-duration: 350ms;
 		    -moz-animation-duration: 350ms;
}

/* for Chrome and Safari*/
@-webkit-keyframes slideinfromright {

    from { -webkit-transform: translateX(100%); }

    to { -webkit-transform: translateX(0);}

}

@-webkit-keyframes slideinfromleft {

    from { -webkit-transform: translateX(-100%);}

    to { -webkit-transform: translateX(0); }

}

@-webkit-keyframes slideouttoleft {

    from { -webkit-transform: translateX(0); }

    to { -webkit-transform: translateX(-100%);}

}

@-webkit-keyframes slideouttoright {

    from { -webkit-transform: translateX(0);}

    to { -webkit-transform: translateX(100%); }

}

/* for Mozilla Firefox */

@-moz-keyframes slideinfromright {

    from { -moz-transform: translateX(100%);  }

    to { -moz-transform: translateX(0); }

}

@-moz-keyframes slideinfromleft {

    from { -moz-transform: translateX(-100%); }

    to {  -moz-transform: translateX(0); }

}

@-moz-keyframes slideouttoleft {

    from { -moz-transform: translateX(0);}

    to {  -moz-transform: translateX(-100%);}

}

@-moz-keyframes slideouttoright {

    from { -moz-transform: translateX(0); }

    to { -moz-transform: translateX(100%);  }
}

/**
 * 	从底部进入
 */
@-webkit-keyframes moveFromBottom {
	from { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveFromBottom {
	from { -moz-transform: translateY(100%); }
}
@keyframes moveFromBottom {
	from { transform: translateY(100%); }
}

/**
 * 从底部退出
 */
@-webkit-keyframes moveToBottom {
	to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes moveToBottom {
	to { -moz-transform: translateY(100%); }
}
@keyframes moveToBottom {
	to { transform: translateY(100%); }
}

